<template>
    <div class="selection-container">

        <!-- 部门选择 -->
        <div class="selection-card">
            <div class="card-header">
                <i class="el-icon-office-building"></i>
                <span>部门选择</span>
                <span v-if="selectedNodes.length > 0" class="selection-count">{{ selectedNodes.length }}个已选</span>
            </div>
            <treeselect v-model="selectedNodes" :multiple="true" :options="treeData" :flat="true" :searchable="true"
                @input="queryUsers" placeholder="请选择部门..." class="treeselect-box" />
        </div>

        <!-- 系统选择 -->
        <div class="selection-card" :class="{ disabled: selectedNodes.length === 0 }">
            <div class="card-header">
                <i class="el-icon-monitor"></i>
                <span>系统选择</span>
                <span v-if="system.length > 0" class="selection-count">{{ system.length }}个已选</span>
            </div>
            <el-select v-model="system" placeholder="请选择系统" :disabled="selectedNodes.length === 0"
                @change="querySystemUser">
                <el-option v-for="sys in allSystems" :key="sys.menuId" :label="sys.menuName" :value="sys.menuId" />
            </el-select>
        </div>

        <!-- 人员选择 -->
        <div class="selection-card" :class="{ disabled: system.length === 0 }">
            <div class="card-header">
                <i class="el-icon-user"></i>
                <span>人员选择</span>
                <span v-if="queryUser.length > 0" class="selection-count">{{ queryUser.length }}个已选</span>
            </div>
            <el-select v-model="queryUser" multiple placeholder="请选择人员" :disabled="system.length === 0" @change="">
                <el-option v-for="user in users" :key="user.userId" :label="user.nickName + ' ' + user.userName"
                    :value="user.userId" />
            </el-select>
        </div>

        <el-button @click="setEmilSystem" :disabled="system.length === 0">添加</el-button>

        <!-- 预览区域 -->
        <div class="preview-section" v-if="step > 1">
            <div class="preview-title">选择预览</div>
            <div class="preview-content">
                <div class="preview-item" v-if="selectedNodes.length > 0">
                    <span class="preview-label">已选部门:</span>
                    <div class="preview-value">{{ getSelectedDeptNames() }}</div>
                </div>
                <div class="preview-item" v-if="system.length > 0">
                    <span class="preview-label">已选系统:</span>
                    <div class="preview-value">{{ getSelectedSystemNames() }}</div>
                </div>
                <div class="preview-item" v-if="queryUser.length > 0">
                    <span class="preview-label">已选人员:</span>
                    <div class="preview-value">{{ getSelectedUserNames() }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listDept } from "@/api/system/dept";
import { getUserByDeptIds, getSystemMenu, querySystemUser,setUserEmailSystem } from "@/api/system/emil";
import { stringify } from 'qs';

export default {
    components: { Treeselect },
    data() {
        return {
            selectedNodes: [], // 选中的部门节点ID数组
            treeData: [],
            users: [],
            queryUser: [],
            allSystems: [],
            system: '',
            step: 1
        }
    },
    computed: {


    },
    created() {
        this.getalllist()
    },
    methods: {
        setEmilSystem() {
            setUserEmailSystem(this.queryUser).then(response=>{
                alert(JSON.stringify(response))
            })
        },
        queryUsers() {
            getUserByDeptIds(this.selectedNodes).then(response => {
                this.users = response
            })
        },
        querySystemUser() {
            querySystemUser(this.system).then(response => {
                this.queryUser = [];
                this.queryUser = response.map(user => user.sysUserId);
            });
        },
        getalllist() {
            listDept().then(response => {
                let deptList = response.data;
                const nodeMap = new Map();
                const rootNodes = [];

                // 创建节点映射
                deptList.forEach(dept => {
                    nodeMap.set(dept.deptId, {
                        id: dept.deptId,
                        label: dept.deptName,
                        children: []
                    });
                });

                // 构建树结构
                deptList.forEach(dept => {
                    const node = nodeMap.get(dept.deptId);
                    const parentId = dept.parentId;

                    if (parentId && nodeMap.has(parentId)) {
                        nodeMap.get(parentId).children.push(node);
                    } else {
                        rootNodes.push(node);
                    }
                });

                this.treeData = this.clearChildren(rootNodes);
            })
            getSystemMenu().then(response => {
                this.allSystems = response
            })
        },
        clearChildren(nodes) {
            return nodes.map(node => {
                const nodeC = { ...node }
                if (nodeC.children && nodeC.children.length > 0) {
                    nodeC.children = this.clearChildren(nodeC.children);
                } else {
                    delete nodeC.children;
                }
                return nodeC
            })
        },
        updateStep(newStep) {
            this.step = newStep;
        },
        getSelectedDeptNames() {
            // 获取选中的部门名称
            const selectedDepts = [];
            const findDept = (nodes) => {
                nodes.forEach(node => {
                    if (this.selectedNodes.includes(node.id)) {
                        selectedDepts.push(node.label);
                    }
                    if (node.children) {
                        findDept(node.children);
                    }
                });
            };
            findDept(this.treeData);
            return selectedDepts.join(', ');
        },
        getSelectedSystemNames() {
            // 获取选中的系统名称
            return this.system.map(sys => {
                const systemObj = this.allSystems.find(s => s.value === sys);
                return systemObj ? systemObj.label : sys;
            }).join(', ');
        },
        getSelectedUserNames() {
            // 获取选中的人员名称
            return this.queryUser.map(userId => {
                const userObj = this.users.find(u => u.value === userId);
                return userObj ? userObj.label : userId;
            }).join(', ');
        }
    }
}
</script>

<style scoped>
.selection-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ebeef5;
    color: #c0c4cc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: all 0.3s;
}

.step.active .step-number {
    background: #409eff;
    color: white;
}

.step-title {
    color: #909399;
    font-size: 14px;
}

.step.active .step-title {
    color: #303133;
}

.step-line {
    flex: 1;
    height: 2px;
    background: #ebeef5;
    margin: 0 10px;
    position: relative;
    top: -16px;
}

.step.active+.step-line {
    background: #409eff;
}

.selection-card {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    transition: all 0.3s;
}

.selection-card:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.selection-card.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px;
    color: #303133;
}

.card-header i {
    margin-right: 10px;
    color: #409eff;
}

.selection-count {
    margin-left: auto;
    font-size: 12px;
    color: #409eff;
    background: #ecf5ff;
    padding: 2px 8px;
    border-radius: 10px;
}

.treeselect-box {
    margin-bottom: 10px;
}

.preview-section {
    margin-top: 30px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 4px;
}

.preview-title {
    font-size: 16px;
    color: #303133;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.preview-title i {
    margin-right: 10px;
    color: #409eff;
}

.preview-content {
    background: white;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}

.preview-item {
    margin-bottom: 10px;
}

.preview-item:last-child {
    margin-bottom: 0;
}

.preview-label {
    font-size: 14px;
    color: #909399;
    margin-bottom: 5px;
}

.preview-value {
    font-size: 14px;
    color: #606266;
    word-break: break-all;
}

/* 调整treeselect样式 */
.vue-treeselect__control {
    height: 40px;
    border-radius: 4px;
}

.vue-treeselect__placeholder {
    color: #c0c4cc;
}

/* 调整el-select样式 */
.el-select {
    width: 100%;
}

.el-select__tags {
    max-width: 100%;
}
</style>